<template>
	<view class="content">
		<view class="bg">
			<image src="../static/image-bg.png" mode=""></image>
		</view>
		<view class="ye">
			<view class="ye-box">
				<view class="ye-box-title">
					保证金余额(元)
					<text @click="gotoInfo()"
						style="color: #0175FE;border-left: 1px solid #ccc;padding-left: 10rpx;margin-left: 10rpx;">明细</text>
				</view>
				<!-- <view class="ye-box-title" v-else>
					需缴纳保证金(元)
					<text @click="gotoInfo()" style="color: #0175FE;border-left: 1px solid #ccc;padding-left: 10rpx;margin-left: 10rpx;">明细</text>
				</view> -->
				<view class="ye-box-price">{{safetyMoney}}</view>
				<view class="ye-box-sub flex justify-center">
					<view class="ye-box-sub-l" @click="Tuiprice()" v-if="safetyMoney>0">退保证金</view>
					<view class="ye-box-sub-r" @click="submit()" v-if="isSafetyMoney!=1">缴纳保证金</view>
				</view>
			</view>
		</view>
		<!-- 规则 -->
		<view class="gz">
			<view class="gz-box">
				<view class="gz-box-title">
					保证金规则
				</view>
				<view class="gz-box-titles">{{content.min}}</view>
				<view class="gz-box-titles-sj" v-html="content.value"></view>
				<view class="gz-box-titles">{{tuiContent.min}}</view>
				<view class="gz-box-titles-sj" v-html="tuiContent.value"></view>
			</view>
		</view>

		<!-- 支付方式 -->
		<u-popup v-model="showpay" mode="center" :closeable="closeable" width="580" border-radius="14">
			<view class="popup_pay">
				<view class="text-lg text-center text-bold">保证金</view>
				<view class="margin-top-xl  padding-lr-sm" style="background: #F2F2F2;">
					<u-input v-model="earnestMoney" type="number" placeholder="请输入缴纳的保证金金额" />
				</view>
				<view style="margin: 20rpx 0;">
					<view
						style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
						v-for="(item,index) in openLists" :key='index'>
						<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
						</image>
						<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
							{{item.text}}
						</view>
						<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item)'>
							<label class="tui-radio">
								<radio color="#1777FF" :checked="openWay === item.id ? true : false" />
							</label>
						</radio-group>
					</view>
				</view>
				<view class="pay_btn" @click="pay()">确认支付</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				safetyMoney: 0,
				showpay: false,
				openLists: [],
				openWay: 1,
				closeable: true,
				isSafetyMoney: '',
				content: [],
				tuiContent: [],
				earnestMoney: 0,
				money: 0
			};
		},
		onLoad() {
			this.getUserInfo()
			// 保证金缴纳协议 617
			this.$Request.get('/app/common/type/617').then(res => {
				if (res.code == 0 && res.data.value) {
					this.content = res.data
				}
			});
			// 保证金退款协议 618
			this.$Request.get('/app/common/type/618').then(res => {
				if (res.code == 0 && res.data.value) {
					this.tuiContent = res.data
				}
			});

			// #ifdef APP
			this.openLists = [{
					image: '/my/static/icon_weixin.png',
					text: '微信',
					id: 1
				}, {
					image: '/my/static/zhifubao.png',
					text: '支付宝',
					id: 2
				}],
				this.openWay = 1;
			// #endif

			// #ifdef MP-WEIXIN
			this.openLists = [{
					image: '/my/static/icon_weixin.png',
					text: '微信',
					id: 1
				}],
				this.openWay = 1;
			// #endif

			// #ifdef H5
			let ua = navigator.userAgent.toLowerCase();
			if (ua.indexOf('micromessenger') !== -1) {
				//公众号是否自动登录  237
				this.$Request.get('/app/common/type/237').then(res => {
					if (res.data && res.data.value && res.data.value == '是') {
						this.openLists = [{
							image: '/my/static/zhifubao.png',
							text: '支付宝',
							id: 2
						}, {
							image: '/my/static/icon_weixin.png',
							text: '微信',
							id: 1
						}];
						this.openWay = 1;
					} else {
						this.openLists = [{
							image: '/my/static/zhifubao.png',
							text: '支付宝',
							id: 2
						}];
						this.openWay = 2;
					}
				})
			} else {
				this.openLists = [{
					image: '/my/static/zhifubao.png',
					text: '支付宝',
					id: 2
				}];
				this.openWay = 2;
			}
			// #endif
		},
		onShow() {
			this.getMoney()
		},
		methods: {
			selectWay(item) {
				this.openWay = item.id
			},
			//保证金明细
			gotoInfo() {
				uni.navigateTo({
					url: '/my/wallet/detailed'
				})
			},
			getUserInfo() {
				this.$Request.get("/app/user/selectUserById").then(res => {
					if (res.code == 0) {
						this.isSafetyMoney = res.data.isSafetyMoney
						if (res.data.isSafetyMoney == 1) {
							this.getMoney()
						} else {
							this.Getmoney()
						}
					}
				});
			},
			// 我的钱包
			getMoney() {
				this.$Request.get("/app/userMoney/selectMyMoney").then(res => {
					if (res.code == 0 && res.data) {
						this.safetyMoney = res.data.safetyMoney
					}
				});
			},
			// 保证金
			Getmoney() {
				this.$Request.get("/app/common/type/616").then(res => {
					console.log(res)
					if (res.code == 0) {
						this.money = res.data.value

					}
				});
			},
			//缴纳保证金
			submit() {
				
				this.earnestMoney = parseFloat(this.money - this.safetyMoney).toFixed(2)
				this.showpay = true
			},
			//退保证金
			Tuiprice() {
				this.$Request.post('/app/userMoney/refundSafetMoney').then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '申请提交成功，保证金已退还至您的钱包账户',
							icon: 'none',
							duration: 1000
						})
						setTimeout(function() {
							uni.navigateBack()
						}, 1000)

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},
			pay() {
				let that = this;
				if(!that.earnestMoney){
					uni.showToast({
						title:'请输入缴纳的保证金金额',
						icon:'none'
					})
					return
				}
				if (Number(that.earnestMoney) <=0) {
					uni.showToast({
						title: '保证金金额不能小于0',
						icon: 'none',
						duration: 1000
					})
					return
				}
				uni.showLoading({
					title: '支付中'
				});
				let userId = uni.getStorageSync('userId')
				let openId = uni.getStorageSync('openId')
				that.showpay = false
				if (that.openWay == 1) { //微信支付
					// #ifdef MP-WEIXIN
					let data = {
						money: that.earnestMoney,
						// openId: openId,
						classify: 3,
						type: 3
					}
					that.$Request.post('/app/wxPay/paySafetyMoney', data).then(res => {
						console.log(res)
						uni.hideLoading();
						if (res.code == 0) {
							that.earnestMoney = ''
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.timestamp,
								nonceStr: res.data.noncestr,
								package: res.data.package,
								signType: res.data.signType,
								paySign: res.data.sign,
								success: function(res) {
									console.log(res)
									uni.showToast({
										title: '支付成功',
										icon: 'nones'
									});
									uni.navigateBack()
									// this.$queue.showToast('支付成功');
									// that.getshanghuinfo()
									// uni.switchTab({
									// 	url: '/pages/my/index'
									// })
								},
								fail: function(err) {
									that.$queue.showToast('支付失败');
								}
							});
						}
					});
					// #endif


					// #ifdef H5
					let data = {
						money: that.earnestMoney,
						classify: 2,
						type: 3
					}
					that.$Request.post('/app/wxPay/paySafetyMoney', data).then(res => {
						uni.hideLoading();
						that.showpay = false
						that.callPay(res.data);
					});
					// #endif

					// #ifdef APP
					let data = {
						money: that.earnestMoney,
						classify: 1,
						type: 3
					}
					that.$Request.post('/app/wxPay/paySafetyMoney', data).then(res => {
						uni.hideLoading()
						console.log(res)
						that.showpay = false
						if (res.code == 0) {
							that.isCheckPay(res.code, 'wxpay', JSON.stringify(res.data));
						}
					});
					// #endif

				} else if (that.openWay == 2) { //支付宝支付
					// #ifdef H5
					let data = {
						money: that.earnestMoney,
						classify: 5,
						userType:3
					}
					that.$Request.post('/app/aliPay/paySafetyMoney', data).then(
						res => {
							uni.hideLoading()
							that.showpay = false
							const div = document.createElement('div')
							div.innerHTML = res.data //此处form就是后台返回接收到的数据
							document.body.appendChild(div)
							document.forms[0].submit()
						});
					// #endif

					// #ifdef APP-PLUS
					let data = {
						money: that.earnestMoney,
						classify: 4
					}
					that.$Request.post('/app/aliPay/paySafetyMoney', data).then(
						res => {
							uni.hideLoading()
							that.showpay = false
							that.setPayment('alipay', res.data);
						});
					// #endif

				}
			},
			callPay: function(response) {
				if (typeof WeixinJSBridge === "undefined") {
					if (document.addEventListener) {
						document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
					} else if (document.attachEvent) {
						document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
						document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
					}
				} else {
					this.onBridgeReady(response);
				}
			},
			onBridgeReady: function(response) {
				let that = this;
				if (!response.package) {
					return;
				}
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": response.appid, //公众号名称，由商户传入
						"timeStamp": response.timestamp, //时间戳，自1970年以来的秒数
						"nonceStr": response.noncestr, //随机串
						"package": response.package,
						"signType": response.signType, //微信签名方式：
						"paySign": response.sign //微信签名
					},
					function(res) {
						if (res.err_msg === "get_brand_wcpay_request:ok") {
							// 使用以上方式判断前端返回,微信团队郑重提示：
							//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
							uni.showLoading({
								title: '支付成功'
							});
							uni.hideLoading();

							uni.switchTab({
								url: '/pages/my/index'
							})
						} else {
							uni.hideLoading();
						}
						WeixinJSBridge.log(response.err_msg);
					}
				);
			},
			isCheckPay(code, name, order) {
				if (code == 0) {
					console.log('999999999999')
					this.setPayment(name, order);
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '支付信息有误'
					});
				}
			},
			setPayment(name, order) {
				console.log(777777777, name, order)
				uni.requestPayment({
					provider: name,
					orderInfo: order, //微信、支付宝订单数据
					success: function(res) {
						uni.hideLoading();
						uni.showLoading({
							title: '支付成功'
						});
						uni.switchTab({
							url: '/pages/my/index'
						})
					},
					fail: function(err) {
						uni.hideLoading();
					},
					complete() {
						uni.hideLoading();
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}

	.bg {
		width: 100%;
		height: 384rpx;
	

		image {
			width: 100%;
			height: 100%;
		}
	}

	.ye {
		width: 100%;
		height: 430rpx;
		display: flex;
		justify-content: center;
		margin-top: -345rpx;

		.ye-box {
			z-index: 999;
			width: 690rpx;
			height: 100%;
			border-radius: 24rpx;
			background: #FFFDFC;
			box-shadow: 0rpx 15rpx 43rpx 0rpx rgba(232, 215, 199, 0.2900);

			.ye-box-title {
				width: 100%;
				text-align: center;
				margin-top: 60rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
			}

			.ye-box-price {
				width: 100%;
				text-align: center;
				color: #333333;
				font-size: 78rpx;
				font-weight: 500;
				margin-top: 40rpx;
			}

			.ye-box-sub {
				width: 100%;
				height: 88rpx;
				margin-top: 50rpx;

				view {
					width: 305rpx;
					height: 88rpx;
					font-size: 28rpx;
					font-weight: bold;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.ye-box-sub-l {
					border: 2rpx solid #CCCCCC;
					color: #333333;

				}

				.ye-box-sub-r {
					background: #0175FE;
					color: #FFFFFF;
				}
			}
		}
	}

	.gz {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		margin-top: 60rpx;

		.gz-box {
			width: 680rpx;

			.gz-box-title {
				color: #333333;
				font-size: 38rpx;
				font-weight: bold;
			}

			.gz-box-titles {
				color: #333333;
				font-size: 32rpx;
				font-weight: bold;
				margin-top: 58rpx;
			}

			.gz-box-titles-sj {
				width: 100%;
				color: #666666;
				font-size: 28rpx;
				margin-top: 29rpx;
			}
		}
	}

	.popup_pay {
		width: 100%;
		position: relative;
		// padding-bottom: 45rpx;
		background-color: #fff;
		padding: 20rpx 20rpx 40px 20rpx;
		/* height: 160px; */
		/* #ifndef MP-WEIXIN */
		/* height: 130px; */
		/* #endif */

	}

	.pay_btn {
		// width: 90%;
		// margin: 0 auto;
		text-align: center;
		background: #0175FE;
		height: 80rpx;
		border-radius: 16rpx;
		color: #ffffff;
		line-height: 80rpx;
		margin-top: 30rpx;
	}
</style>